<template>
  <div class="goods">
      <!-- 分类列表 -->
<div class="menu-wrapper" ref="menuScroll">
  <div>
  <ul style="padding:0;text-align:center">
    <!-- 专场 -->
    <li class="menu-item" :class="{'current':currentIndex===0}" @click="selectMenu(0)">
      <p class="text">
         <img class="icon" :src="container.tag_icon" v-if="container.tag_icon">
         {{container.tag_name}}
      </p>
    </li>
    
     <li class="menu-item" :class="{'current':currentIndex===index+1}" v-for="(item,index) in goods" :key="index" @click="selectMenu(index+1)">
      <p class="text">
         <img class="icon" :src="item.icon" v-if="item.icon">
         {{item.name}}
      </p>
      <i class="num" v-show="calculateCount(item.spus)">
        {{calculateCount(item.spus)}}
      </i>
    </li>
  </ul>
  </div>
</div>
      <!-- 商品列表 -->
<div class="foods-wrapper" ref="foodScroll">
  <div>
  <ul>
    <!-- 专场-->
       <li class="container-list food-list-hook">
         <div v-for="(item,index) in container.operation_source_list" :key="index">
           <img :src="item.pic_url">
         </div>
       </li>

    <!--具体分类 -->
    <li v-for="(item,index) in goods" :key="index" class="food-list food-list-hook">
          <h3 class="title">{{item.name}}</h3>

    <!-- 具体的商品列表 -->
      <ul>
          <li v-for="(food,index) in item.spus" :key="index" @click="showDetail(food)" class="food-item">
              <div class="icon" :style="head_bg(food.picture)"></div>
              <div class="content">
                <h3 class="name">{{food.name}}</h3> 
                <p class="desc" v-if="food.description">{{food.description}}</p>
                <div class="extra">
                  <span class="saled">{{food.month_saled_content}}</span>
                  <span class="praise">{{food.praise_content}}</span>
                </div>
                <img class="product" :src="food.product_label_picture">
                <p class="price">
                   <span class="text">${{food.min_price}}</span>
                   <span class="unit">/{{food.unit}}</span>
                </p>
              </div>
              <div class="cartcontrol-wrapper">
                <app-cart-control :food="food"></app-cart-control>
              </div>
          </li>
        </ul>
    </li>
  </ul>
  </div>
</div>
<!-- 购物车-->
<app-shocart :poinfo="poinfo" :selectFoods="selectFoods"></app-shocart>
<!-- 商品详情 -->
<app-product-detail :food="selectFood" ref="foodView"></app-product-detail>
  </div>
</template>

<script>
import ProductDetail from '../../components/productDetail/ProductDetail'
import BScroll from 'better-scroll'
import Shopcart from'../shopcart/Shopcart'
import Cartcontrol from '../cartcontrol/Cartcontrol'
export default {
  name: 'Header',
  data () {
    return {
       container:{},
       goods:[],
       listHeight:[],
       menuScroll:{},
       foodScroll:{},
       scrollY:0,
       poinfo:{},
       selectFood:{},
    }
 },
 computed: {
   selectFoods(){
      let foods = []
      this.goods.forEach((myfoods) => {
        myfoods.spus.forEach((food) => {
          if(food.count > 0){
            foods.push(food)
          }
        })
      })

      return foods
    },
   currentIndex(){
     for(let i=0;i<this.listHeight.length;i++){
      //范围
      let height1=this.listHeight[i]
      let height2=this.listHeight[i+1]
      //是否在上述区间
      if((!height2 || (this.scrollY>=height1&&this.scrollY<height2))){
          return i
      }
     }
      return 0
   }
 },
  created() {
   this.getdata();
  },
  components:{
    "app-shocart":Shopcart,
     "app-cart-control":Cartcontrol,
     "app-product-detail":ProductDetail
  },
 
  methods: {
    selectMenu(index){
       //console.log(index)
       let foodlist = this.$refs.foodScroll.getElementsByClassName("food-list-hook")
      let element = foodlist[index]
      // console.log(element)
      // 滚动到对应元素的位置
      this.foodScroll.scrollToElement(element,250)
    },

    calculateHeight(){
      //获取元素
      let foodlist = this.$refs.foodScroll.getElementsByClassName("food-list-hook")
      //console.log(foodlist)
      //console.log(foodlist.length)
      let height=0;
      this.listHeight.push(height);
      for(let i = 0; i < foodlist.length; i++){
        let item = foodlist[i]
        //console.log(item)
        // 累加
        height += item.clientHeight
        this.listHeight.push(height)
      }
      //console.log(this.listHeight)
    },
    initScroll(){
       this.menuScroll = new BScroll(this.$refs.menuScroll,{
        click:true
      })
      this.foodScroll = new BScroll(this.$refs.foodScroll,{
        probeType:3,
        click:true
      })
      // foodScroll 监听事件
      this.foodScroll.on("scroll",(pos) => {
        // console.log(pos.y)
        this.scrollY = Math.abs(Math.round(pos.y))
       // console.log(this.scrollY)
      })

    },
    head_bg(imgname){
      return "background-image: url(" + imgname + ");"

    },
    getdata(){
      this.axios.get("/api/goods")
    // .then(res => {
    //     return res.json()
    //   })
      .then(response =>{
        //console.log(response)
        if(response.data.code == 0){
          // console.log(response.data)
          this.container = response.data.data.container_operation_source
          this.goods=response.data.data.food_spu_tags
          this.poinfo=response.data.data.poi_info
          //console.log(this.poinfo)
         // console.log(this.container)
         // console.log(this.goods)
         this.$nextTick(() => {
            // 执行滚动方法
            this.initScroll();

            // 计算分类的区间高度
            this.calculateHeight();
            // 监听滚动的位置
            // 根据滚动位置确认下标,与左侧对应
            // 通过下标实现点击左侧,滚动右侧
          })
        }
      })
      .catch(res=>{
        console.log(res)
      })
    },
    calculateCount(spus){
      let count=0;
      spus.forEach((food)=>{
        if(food.count>0){
           count+=food.count
        }
      })
      return count
    },
    showDetail(food){
      this.selectFood=food
      this.$refs.foodView.showView()
    }
  },
}
</script>
}

<style scoped>
ul{
  padding: 0!important;
  list-style: none;
}
.goods{
  display: flex;
  position: absolute;
  top:190px;
  bottom: 50px;
  overflow: hidden;
  /* background-color: red; */
  width: 100%;
  left: 0;
}
.goods .menu-wrapper{
   flex:0 0 85px;
   background-color: #f4f4f4;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center
   /* display: flex; */
}
.goods .foods-wrapper{
    flex-grow: 1;
    /* background-color: blue; */
}
.goods .menu-wrapper .menu-item{
  /* border-bottom: 1.1px solid #e4e4e4 */
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center; 
  border-bottom: 1.1px solid #e4e4e4;
  position: relative;
}

.goods .menu-wrapper .menu-item .text{
	font-size: 13px;
	color: #333333;
	line-height: 17px;
	/* justify-content: middle; */
    /* display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden; */
    padding-bottom: 4px;
}
.goods .menu-wrapper .menu-item .text .icon{
	width: 15px;
	height: 15px;
	/* justify-content: middle; */
}


/* 专场样式 */
 .goods .foods-wrapper .container-list{
	padding: 0px 11px 0 11px;
	border-bottom: 1px solid #E4E4E4;
}

.goods .foods-wrapper .container-list img{
	width: 100%;
	margin-bottom: 11px;
	border-radius: 5px;
}
/* 具体分类商品布局 */ 
.goods .foods-wrapper .food-list{
	padding: 11px;
}



.goods .foods-wrapper .food-list .title{
	height: 13px;
	font-size: 13px;
	background: url(./img/btn_yellow_highlighted@2x.png) no-repeat left center;
	background-size: 2px 10px;
	padding-left: 7px;
	margin-bottom: 12px;
}




.goods .foods-wrapper .food-list .food-item{
	display: flex;
	margin-bottom: 25px;
  position: relative;
}

.goods .foods-wrapper .food-list .food-item  .icon{
	flex: 0 0 63px;
	background-position: center;
	background-size: 120% 100%;
  background-repeat: no-repeat;
	margin-right: 11px;
	height: 75px;
}
.goods .foods-wrapper .food-list .food-item .content{
	flex: 1;
}
/* 具体内容样式 */ 
.goods .foods-wrapper .food-list .food-item .content .name{
	font-size: 16px;
	line-height: 21px;
	color: #333333;
	margin-bottom: 10px;
	padding-right: 27px;

}

.goods .foods-wrapper .food-list .food-item .content .desc{
	font-size: 10px;
	line-height: 19px;
	color: #bfbfbf;
	margin-bottom: 8px;

/* 超出部分显示省略号*/
	-webkit-line-clamp: 1;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.goods .foods-wrapper .food-list .food-item .content .extra{
	font-size: 10px;
	color: #BFBFBF;
	margin-bottom: 7px;
}
.goods .foods-wrapper .food-list .food-item .content .extra .saled{
	margin-right: 14px;
}
.goods .foods-wrapper .food-list .food-item .content .product{
	height: 15px;
	margin-bottom: 6px;
}
.goods .foods-wrapper .food-list .food-item .content .price{
	font-size: 0;
}
.goods .foods-wrapper .food-list .food-item .content .price .text{
	font-size: 14px;
	color: #fb4e44;
}
.goods .foods-wrapper .food-list .food-item .content .price .unit{
	font-size: 12px;
	color: #BFBFBF;
}
/* 当前选中 */ 
.goods .menu-wrapper .menu-item.current{
	background: white;
	font-weight: bold;
	margin-top: -1px;
}
.goods .menu-wrapper .menu-item:first-child.current{
	margin-top: 1px;
}

.goods .foods-wrapper .food-list .food-item .cartcontrol-wrapper{
	position: absolute;
	right: 0;
	bottom: 0;
}

.goods .menu-wrapper .menu-item .num{
	position: absolute;
	right:6px;
	top: 6px;
	width: 13px;
	height: 13px;
	border-radius: 50%;
	color: white;
	background: red;
	text-align: center;
	font-size: 7px;
	line-height: 13px;
}
</style>    